import {useState, useEffect} from "react";
import emitter from "../../utils/header/eventBus";
import {Modal, Avatar, Upload, message, Button, Collapse, Input} from "antd";
// import {UploadOutlined} from "@ant-design/icons";

const {Search} = Input;
const {Panel} = Collapse;
// import "../../style/userInfo.scss";
// 上传组件信息，需要更改为
const uploadProps = {
    name: "file",
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76", // 更改为后端upload接口
    onChange(info) {
        // if (info.file.status !== "uploading") {
        //   console.log(info.file, info.fileList);
        // }
        if (info.file.status === "done") {
            message.success("头像更新成功");
        } else if (info.file.status === "error") {
            message.error(`头像更新失败`);
        }
    },
};
export default function UserInfo(props) {
    const {slogan, phone, email, student_id, avatorImg = "", name} = props; // 获取用户基本信息
    const [showPasswordModal, setShowPasswordModal] = useState(false);
    const [previewImg, setPreviewimg] = useState(avatorImg);
    const [userInfo, setUserInfo] = useState({});
    useEffect(() => {
        setUserInfo({
            slogan,
            phone,
            email,
        });
        console.log(
            "🚀 ~ file: userInfo.jsx ~ line 28 ~ userInfo ~ userInfo",
            userInfo
        );
    }, student_id);
    const handlesloganSearch = (value) => {
        setUserInfo((old) => ({
            ...old,
            slogan: value,
        }));
    };
    const getBase64 = (file) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = (error) => reject(error);
        });
    };
    // const handlePreview = (file) => {
    //     console.log("🚀 ~ file: userInfo.jsx ~ line 26 ~ onPreview ~ file", file);
    //     async (file) => {
    //         if (!file.url && !file.preview) {
    //             file.preview = await getBase64(file.originFileObj);
    //         }
    //         setPreviewimg(file.url || file.preview);
    //     };
    // };

    const handlePhoneSearch = (value) => {
        setUserInfo((old) => ({
            ...old,
            phone: value,
        }));
    };
    const handleEmailSearch = (value) => {
        setUserInfo((old) => ({
            ...old,
            email: value,
        }));
    };

    useEffect(() => {
        emitter.on("handleUserInfo", () => setShowPasswordModal(true));
    });
    return (
        <Modal
            title="用户信息"
            visible={showPasswordModal}
            onOk={() => setShowPasswordModal(false)}
            onCancel={() => setShowPasswordModal(false)}
            okText="确认"
            cancelText="取消"
            className="user-info-container"
        >
            <div className="user-avatar">
                <Avatar src={previewImg}/>
                {/*<Upload {...uploadProps} onPreview={handlePreview}>*/}
                {/*    <Button icon={<UploadOutlined/>}>更新头像</Button>*/}
                {/*</Upload>*/}
            </div>
            <div className="info-item">
                <span>学号</span>
                <span>{student_id || "-"}</span>
            </div>
            <div className="info-item">
                <span>用户名</span>
                <span>{name || "-"}</span>
            </div>
            <div className="info-item">
                <span>签名</span>
                <span>{userInfo.slogan || "-"}</span>
                <span className="edit">
          <Collapse bordered={false}>
            <Panel header="编辑" key="1">
              <Search
                  placeholder="请输入签名"
                  allowClear
                  enterButton="更改"
                  size="small"
                  onSearch={handlesloganSearch}
              />
            </Panel>
          </Collapse>
        </span>
            </div>
            <div className="info-item">
                <span>手机</span>
                <span>{userInfo.phone || "-"}</span>
                <span className="edit">
          <Collapse bordered={false}>
            <Panel header="编辑">
              <Search
                  placeholder="输入手机号"
                  allowClear
                  enterButton="更改"
                  size="small"
                  onSearch={handlePhoneSearch}
              />
            </Panel>
          </Collapse>
        </span>
            </div>
            <div className="info-item">
                <span>邮箱</span>
                <span>{userInfo.email || "-"}</span>
                <span className="edit">
          <Collapse bordered={false}>
            <Panel header="编辑">
              <Search
                  placeholder="输入邮箱"
                  allowClear
                  enterButton="更改"
                  size="small"
                  onSearch={handleEmailSearch}
              />
            </Panel>
          </Collapse>
        </span>
            </div>
        </Modal>
    );
}
